@import url("color.css");
// ====================================================== base ====================================================== //
:root {
    --font-size: 16px;
    --font-family: '楷体', 'Courier New';
}
body {
    font-size: var(--font-size);
    font-family: var(--font-family);
}
.plugin {
    all: unset;
}
// ====================================================== 文本 ====================================================== //
.Ptext {
    white-space: pre-wrap;
}
// ====================================================== 图标 ====================================================== //
:root {
    --icon-size: 16px;
}
.Picon {
    display: inline-block;
    vertical-align: middle;
    width: var(--icon-size);
    height: var(--icon-size);
    // 图片图标
    &.image {
        background-repeat: no-repeat;
        background-position: center;
        background-size: var(--icon-size);
    }
    // fontawsome图标
    &.fa {
        line-height: var(--icon-size);
        &::before {
            display: block;
            text-align: center;
            width: 100%;
            height: 100%;
        }
    }
}
.fa-undo {
    font-size: calc(var(--icon-size) * 0.8);
}
// ====================================================== 面板 ====================================================== //
.Ppanel {
    display: flex;
    flex-direction: column;
    border-style: solid;
    border-width: 1px;
    border-radius: 6px 6px 0px 0px;
    overflow: hidden;
    &>.title-bar {
        align-items: center;
        display: flex;
        user-select: none;
        padding: var(--button-padding-TB) var(--button-padding-LR);
        .title-wrapper {
            align-items: center;
            .Picon {
                &+.Ptext {
                    font-weight: bold;
                    padding-left: 3px;
                    &:empty {
                        padding-left: 0px;
                    }
                }
            }
        }
        .title-controls {
            margin-left: auto;
            .Pbutton {
                border: none;
                padding: 0px;
            }
        }
    }
    &>.content-bar {
        padding: var(--button-padding-TB) var(--button-padding-LR);
    }
}
// ====================================================== 按钮 ====================================================== //
:root {
    --button-padding-TB: 6px;
    --button-padding-LR: 12px;
}
.plugin {
    &.Pbutton {
        user-select: none;
        display: inline-flex;
        align-items: center;
        border-style: solid;
        border-width: 1px;
        border-radius: 3px;
        padding: var(--button-padding-TB) var(--button-padding-LR);
        .Picon {
            text-align: center;
            margin: auto;
            &+.Ptext {
                flex-grow: 1;
                padding-left: 3px;
                &:empty {
                    padding-left: 0px;
                }
                &:empty::before {
                    content: '';
                }
            }
        }
        .Ptext {
            &:empty::before {
                content: ' ';
            }
            margin: auto;
            padding: 0px;
        }
    }
}
// ====================================================== 输入框 ====================================================== //
:root {
    --inputer-padding-TB: 6px;
    --inputer-padding-LR: 12px;
    --inputer-font-size: var(--font-size);
    --inputer-height: calc(2px + var(--inputer-font-size));
}
.plugin {
    &.Pinput {
        display: flex;
        align-items: center;
        border-style: solid;
        border-width: 1px;
        border-radius: 3px;
        .container {
            flex: 1;
            display: flex;
            .inputer {
                all: unset;
                border: none;
                line-height: var(--inputer-height);
                flex: 1;
                padding-block: 0px;
                padding-inline: 0px;
                padding: var(--inputer-padding-TB) var(--inputer-padding-LR);
                user-select: text;
                outline: none;
            }
        }
        // 控制按钮
        .controls {
            margin-right: var(--inputer-padding-LR);
            align-items: end;
        }
    }
}
// ====================================================== 选择框 ====================================================== //
.plugin {
    &.Pselect {
        position: relative;
        display: flex;
        align-items: center;
        .inputer {
            line-height: var(--inputer-height);
            flex: 1;
            border-style: solid;
            border-width: 1px;
            border-radius: 3px;
            padding-block: 0px;
            padding-inline: 0px;
            padding: 0px;
            padding: var(--inputer-padding-TB) calc(4px + var(--inputer-padding-LR)) var(--inputer-padding-TB) calc(var(--inputer-padding-LR) - 4px);
            outline: none;
        }
        &.disabled {
            .inputer {
                // 去除箭头
                appearance: none;
                // 修正位置
                padding-left: var(--inputer-padding-LR);
            }
        }
        &.readonly {
            .inputer {
                // 去除箭头
                appearance: none;
                // 修正位置
                padding-left: var(--inputer-padding-LR);
            }
        }
        // 控制按钮
        .controls {
            position: absolute;
            right: calc(6px + var(--inputer-padding-LR));
            align-items: end;
        }
        // 空内容不需要控制按钮
        .inputer:empty+.controls {
            visibility: hidden;
        }
    }
}
// ====================================================== 复选框 ====================================================== //
:root {
    --checker-label-offset: calc(var(--inputer-font-size) / 10);
}
.plugin {
    &.Pcheckbox {
        display: flex;
        // 控制按钮
        .controls {
            margin-right: var(--inputer-padding-LR);
            align-items: center;
        }
        .container {
            &:empty {
                height: var(--inputer-height);
                padding: calc(1px + var(--inputer-padding-TB)) var(--inputer-padding-LR);
            }
            display: flex;
            flex-wrap: wrap;
            flex: 1;
            .wrap {
                display: flex;
                align-items: center;
                padding: var(--inputer-padding-TB) 3px;
                // 框
                .inputer {
                    &+label {
                        position: relative;
                        display: inline-block;
                        width: var(--inputer-font-size);
                        height: var(--inputer-font-size);
                        border-style: solid;
                        border-width: 1px;
                    }
                    // 圆框
                    &.inputer_checkbox+label {
                        border-radius: 3px;
                    }
                    // 方框
                    &.inputer_checkradio+label,
                    &.inputer_radio+label {
                        border-radius: 100%;
                    }
                }
                // 钩、圈
                .inputer {
                    // 钩
                    &.inputer_checkbox+label::before,
                    &.inputer_checkradio+label::before {
                        position: absolute;
                        content: "✔";
                        top: calc(-1px - var(--checker-label-offset));
                        left: calc(0px + var(--checker-label-offset));
                        width: var(--inputer-font-size);
                        height: var(--inputer-font-size);
                    }
                    // 圈
                    &.inputer_radio+label::before {
                        position: absolute;
                        content: " ";
                        top: 20%;
                        left: 20%;
                        width: 60%;
                        height: 60%;
                        border-radius: 50%;
                    }
                }
                // 字
                .inputer+label+label {
                    user-select: none;
                    flex-grow: 1;
                    padding-left: 3px;
                }
            }
        }
        // 空内容不需要控制按钮
        .container:empty+.controls {
            visibility: hidden;
        }
    }
}
// ====================================================== 控制按钮 ====================================================== //
.plugin {
    &>.controls {
        visibility: hidden;
        display: flex;
        .Pbutton {
            border: none;
            padding: 0px;
        }
    }
}
.plugin {
    &:hover {
        &>.controls {
            visibility: visible;
        }
    }
}
.plugin.disabled {
    &:hover {
        &>.controls {
            visibility: hidden;
        }
    }
}
.plugin.readonly {
    &:hover {
        &>.controls {
            visibility: hidden;
        }
    }
}
// ====================================================== form ====================================================== //
:root {
    --title-font-size: calc(var(--font-size) * 1.5);
}
form {
    all: unset;
}
.plugin {
    &.Pform {
        margin: 0px;
        padding: calc(var(--distance-TB)*2) var(--distance-LR);
        &>form {
            display: flex;
            flex-direction: column;
            border-style: solid;
            border-width: 1px;
            min-width: 333px;
            &:has(.form-title) {
                border-radius: 6px 6px 0px 0px;
            }
            &>.form-title {
                display: flex;
                align-items: center;
                padding: var(--button-padding-TB) var(--button-padding-LR);
                border-bottom-style: solid;
                border-bottom-width: 1px;
                border-radius: 5px 5px 0px 0px;
                &>.Picon {
                    padding-top: var(--button-padding-TB);
                    padding-bottom: var(--button-padding-TB);
                    width: var(--title-font-size);
                    height: var(--title-font-size);
                    line-height: var(--title-font-size);
                }
                &>.Ptext {
                    padding-top: var(--button-padding-TB);
                    padding-bottom: var(--button-padding-TB);
                    user-select: none;
                    font-weight: bold;
                    font-size: var(--title-font-size);
                    height: var(--title-font-size);
                    line-height: var(--title-font-size);
                    padding-left: 0px;
                }
            }
            &>.form-items {
                display: flex;
                flex-direction: column;
                padding: var(--button-padding-TB) var(--button-padding-LR);
                &>.form-item:first-child {
                    margin-top: 0px;
                }
                &>.form-item {
                    margin-top: var(--button-padding-TB);
                    display: flex;
                    &>.form-item-title {
                        display: flex;
                        align-items: center;
                        justify-content: right;
                        user-select: none;
                        width: 123px;
                        min-width: 123px;
                        overflow-wrap: anywhere;
                    }
                    &>.form-item-input {
                        flex: 1;
                        display: flex;
                        &>.plugin {
                            flex: 1;
                        }
                    }
                }
            }
            &>.form-buttons {
                display: flex;
                padding: var(--button-padding-TB) 0px;
                border-top-style: solid;
                border-top-width: 1px;
                .form-button {
                    display: flex;
                    padding-right: var(--button-padding-LR);
                    &:first-child {
                        margin-left: auto;
                    }
                    &+.form-button {
                        padding-left: 0px;
                    }
                }
            }
        }
    }
    &.Ppanel.with-form {
        &>.title-bar {
            padding: var(--button-padding-LR) var(--button-padding-LR);
        }
        &>.content-bar {
            padding: 0px;
            &>.Pform {
                &>form {
                    border-width: 0px;
                }
            }
        }
    }
}
